Creating and Configuring a Firebase Project for React Native

Course: React Native Training

Topic: Creating and Configuring a Firebase Project

Course Link: React Native Training at JustAcademy

Demo Registration Link: Register for a Course Demo

JustAcademy Website: Visit JustAcademy

1. Introduction to Firebase

Firebase is a development platform from Google that provides services for building mobile and web applications. It helps developers add features such as user authentication, cloud databases, file storage, push notifications, analytics, crash reporting, and application configuration without building every supporting backend service from scratch.

In React Native development, Firebase can be used to create applications that store and retrieve data, authenticate users, synchronize information, upload files, and monitor application performance.

Before using any Firebase service in a React Native application, developers usually create a Firebase project and register the application with it. Registration connects the mobile app to the correct Firebase project and generates the configuration information required for integration.

1.1 What Is a Firebase Project?

A Firebase project is the main container that organizes your registered applications, Firebase services, configuration, and related resources. A project is associated with a Google Cloud project, so it can also be managed through supported Google Cloud tools.

For example, a task-management application named TaskFlow might use a Firebase project to manage user accounts, task records, and file attachments.

1.2 Why Use Firebase with React Native?

• Authentication: Supports sign-in methods such as email and password and supported identity providers.
• Cloud Firestore: Stores application data in collections and documents.
• Realtime Database: Provides a cloud-hosted database with realtime synchronization.
• Cloud Storage: Stores files such as images, documents, and user uploads.
• Cloud Messaging: Supports sending messages and push notifications to supported clients.
• Crashlytics: Helps identify crashes in supported native application setups.
• Analytics: Provides insights into application usage and user engagement.
• Remote Config: Allows selected application behavior or settings to be controlled remotely.

Not every Firebase product is configured in the same way. Some features require native project configuration, additional packages, billing setup, security rules, or platform-specific credentials.

2. Learning Objectives

After completing this topic, learners should be able to:

• Understand Firebase projects, registered apps, and Firebase services.
• Create a Firebase project using the Firebase Console.
• Choose an appropriate project name and project ID.
• Register an Android or iOS application with Firebase.
• Identify the Android package name and iOS bundle identifier.
• Download the correct Firebase configuration files.
• Understand the difference between the Firebase JavaScript SDK and React Native Firebase.
• Install and configure the appropriate Firebase SDK.
• Initialize Firebase services in a React Native application.
• Understand development, testing, and production environments.
• Apply Firebase security and configuration best practices.
• Troubleshoot common project setup errors.

3. Understanding the Firebase Project Structure

Firebase uses a hierarchy in which a project contains registered applications and the resources or services configured for them. Understanding this structure helps prevent configuration mistakes.

3.1 Main Components

3.2 Project Name vs. Project ID

The project name is a readable label that can be changed later. The project ID is a unique identifier used by Firebase and Google Cloud and generally cannot be changed after the project is created.

Choose a project ID carefully. It may appear in resource names, configuration, logs, and service URLs. Avoid putting private information in project names or IDs because identifiers may appear in application configuration or other visible locations.

3.3 One Project Can Contain Multiple Apps

A Firebase project can contain registered apps for different platforms, such as Android and iOS. For example, the Android and iOS versions of one product can be associated with the same Firebase project when they are intended to use the same environment and backend resources.

However, development and production environments often benefit from separate Firebase projects so that test users, data, security settings, and services remain isolated from production.

4. Prerequisites for Creating a Firebase Project

Before creating and configuring Firebase, make sure you have the following items ready.

• A Google account with permission to create or manage Firebase projects.
• A working React Native development environment.
• Node.js and npm or another supported package manager.
• A React Native project created with React Native CLI or Expo.
• The Android package name for the Android application.
• The iOS bundle identifier if configuring an iOS application.
• Internet access to use the Firebase Console and download configuration files.
• Supported Android build tools or Xcode if compiling the respective native app.

4.1 Check the React Native Project

If you already have a React Native project, open a terminal in its root directory and verify that its files are available.

npm --version
node --version

These commands display the installed npm and Node.js versions. Use versions supported by your React Native release and the Firebase packages you plan to install.

4.2 Create a Project If You Do Not Have One

If you are starting a new React Native application, use the official setup instructions for your preferred workflow. The exact project-creation command can change across React Native releases, so consult the current documentation before starting a new project.

Official resource: React Native Environment Setup.

5. Creating a Firebase Project in the Firebase Console

The Firebase Console provides a graphical interface for creating projects, registering apps, enabling services, and managing project settings.

5.1 Step 1: Open Firebase Console

1. Open the official Firebase website.
2. Navigate to the Firebase Console.
3. Sign in with your Google account.
4. Review the account currently selected in the console.

Official link: Open Firebase Console.

5.2 Step 2: Create a New Project

1. Choose the option to create a new Firebase project.
2. Enter a meaningful project name.
3. Review the automatically suggested project ID.
4. If the interface allows it, customize the project ID before creation.
5. Continue through the project setup workflow.

Example project name: TaskFlow Development.

Example project ID: taskflow-dev-12345.

The example project ID is illustrative. The actual ID must be unique and available when you create your project.

5.3 Step 3: Configure Google Analytics

Firebase may offer the option to enable Google Analytics during project creation. Analytics can be useful for understanding application engagement and supporting products such as A/B Testing, Crashlytics integrations, In-App Messaging, and Remote Config workflows.

• Enable Analytics if it is appropriate for the application and your data requirements.
• Select or create an Analytics account if prompted.
• Choose the requested reporting location and review applicable terms.
• If Analytics is not required immediately, review whether you can configure it later in project settings.

5.4 Step 4: Create the Project

Review the selected project settings and click the project creation button. Firebase will provision the required resources. When the process finishes, the console will open the project's overview page.

5.5 Step 5: Verify the Project

After creation, confirm that the project appears in the Firebase Console. Open Project settings and review the project name, project ID, project number, and registered apps area.

6. Registering an Android App with Firebase

Registering the Android application connects the React Native Android package to the selected Firebase project. Firebase uses the Android package name to identify the registered app.

6.1 Step 1: Find the Android Package Name

In a React Native CLI project, inspect the Android Gradle configuration. Depending on the project and Android Gradle Plugin version, the relevant value may be in the namespace field and/or the application's applicationId.

Typical file location:

android/app/build.gradle

Example configuration:

android {
    namespace "com.taskflow"
    defaultConfig {
        applicationId "com.taskflow"
    }
}

The exact syntax may differ between Groovy and Kotlin Gradle files. Confirm the final application ID used by your Android build. Enter that package name when registering the Android app in Firebase.

6.2 Step 2: Add the Android App

1. Open the Firebase project's overview page.
2. Select the Android app option or choose Add app.
3. Enter the Android package name exactly as configured in the project.
4. Optionally enter an app nickname for easier identification.
5. Enter the SHA certificate fingerprints if required for the Firebase feature you intend to use, such as certain sign-in integrations.
6. Continue to register the application.

Important: The package name must match the app you are building. A mismatch can cause Firebase configuration or sign-in integrations to fail.

6.3 Step 3: Download google-services.json

After registering the Android app, Firebase provides a configuration file named google-services.json. Download the file and place it in the Android application module at the location expected by the React Native Firebase setup guide.

Typical path for a React Native CLI project:

your-project/
  android/
    app/
      google-services.json

Do not rename the file or place it in a different directory unless the relevant setup instructions specifically require it.

6.4 Step 4: Configure Android Build Integration

When using React Native Firebase, the Android build must apply the Google Services Gradle plugin according to the package versions and native project template being used. Follow the current React Native Firebase Android installation instructions because the required Gradle syntax can vary across project templates and plugin versions.

Official resource: React Native Firebase Documentation.

7. Registering an iOS App with Firebase

For an iOS application, Firebase uses the bundle identifier to identify the registered app. The bundle identifier must match the identifier used by the iOS target you are building.

7.1 Step 1: Find the Bundle Identifier

Open the iOS project in Xcode and select the appropriate app target. Locate the bundle identifier in the target's signing or general settings.

Example bundle identifier:

com.taskflow.ios

The example is only a sample. Use the actual bundle identifier configured in your application.

7.2 Step 2: Register the iOS App

1. Open the Firebase project overview.
2. Select Add app and choose the Apple platform option.
3. Enter the exact bundle identifier.
4. Optionally provide an app nickname and additional app details.
5. Register the app and continue through the setup instructions.

7.3 Step 3: Download GoogleService-Info.plist

Firebase provides a file named GoogleService-Info.plist for the registered iOS app. Add it to the iOS project according to the React Native Firebase setup instructions and ensure it is associated with the correct application target.

Typical file location:

your-project/
  ios/
    YourApp/
      GoogleService-Info.plist

The exact project folder name may vary. In Xcode, verify that the configuration file is included in the appropriate target and build setup.

8. Understanding Firebase Configuration Files

Firebase generates different configuration formats depending on the platform. These files connect an application to the correct Firebase project and registered app.

Android and iOS configuration files are not interchangeable. Each registered application should use the configuration associated with its platform and app identity.

8.1 What Information Is Included?

Depending on the platform and configuration format, Firebase configuration can include identifiers such as the project ID, app ID, API key, sender ID, and service-specific values.

Firebase client configuration is not equivalent to a server secret or administrator credential. However, configuration must still be handled responsibly: restrict API keys where applicable, configure authorized services, and protect user data through Authentication, Security Rules, and backend authorization.

9. Choosing a Firebase SDK for React Native

There are two common integration approaches to consider when connecting Firebase to a React Native project: the Firebase JavaScript SDK and React Native Firebase.

9.1 Firebase JavaScript SDK

The Firebase JavaScript SDK provides modular JavaScript APIs for supported Firebase services. It is widely used in web applications and can also be used in React Native for supported services and configurations. Before selecting it, verify that each required Firebase feature works with your React Native environment and platform requirements.

Install the SDK with:

npm install firebase

A JavaScript SDK setup may be appropriate for projects that need supported JavaScript-based Firebase functionality, particularly when their requirements align with the SDK's supported environments.

9.2 React Native Firebase

React Native Firebase provides React Native integrations for Firebase services through native modules on Android and iOS. It is a common choice for React Native applications that need native Firebase integration.

Install the base app module with:

npm install @react-native-firebase/app

For Expo projects, use a development build and follow the current Expo and React Native Firebase setup instructions. React Native Firebase native modules are not available inside the standard precompiled Expo Go app.

9.3 Comparison Table

Important: Do not install both SDKs by default or copy initialization code from one approach into the other. Choose the integration based on the required Firebase products and follow the corresponding official setup guide.

10. Installing and Configuring React Native Firebase

This section explains the typical React Native CLI workflow using React Native Firebase. The base @react-native-firebase/app module must be installed before installing most other React Native Firebase service modules.

10.1 Step 1: Install the Base Firebase Module

Open a terminal in the root directory of your React Native project and run:

npm install @react-native-firebase/app

This command adds the base Firebase module to the project dependencies. If you use Yarn, use the equivalent Yarn command and keep your project's package manager consistent.

10.2 Step 2: Confirm Android Configuration

For a React Native CLI Android app, verify that:

• The correct google-services.json file is located in the Android app module.
• The Android application ID matches the registered Firebase Android app.
• The Google Services Gradle plugin is configured as required by the current React Native Firebase installation guide.
• The Gradle and Android build configuration is compatible with the installed package versions.

Do not copy Gradle snippets from an unrelated or outdated tutorial without checking your project's existing plugin versions and build files.

10.3 Step 3: Confirm iOS Configuration

For an iOS app, verify that:

• The correct GoogleService-Info.plist file is included in the iOS project.
• The bundle identifier matches the Firebase app registration.
• The configuration file is associated with the appropriate application target.
• The installed Firebase packages and native dependencies are compatible with your Xcode and iOS setup.

After installing native modules or changing native configuration, rebuild the application. Reloading JavaScript alone does not compile new native dependencies into an existing binary.

10.4 Step 4: Install CocoaPods Dependencies

For a React Native CLI iOS project, install or update CocoaPods dependencies as directed by the current React Native Firebase installation guide.

cd ios
pod install
cd ..

This is a common workflow for projects using CocoaPods. Follow the instructions appropriate to your React Native version and native project structure.

10.5 Step 5: Rebuild the Application

After completing the platform configuration, build and launch the application using the commands and workflow appropriate for your project.

npm run android

For iOS, on a supported macOS development environment, use your project's configured iOS run command or launch the app from Xcode.

If the build fails, review the first meaningful error in the native build output before changing configuration. A missing configuration file, incorrect package identifier, incompatible native dependency, or incorrect Gradle setup can all cause startup or build failures.

11. Initializing Firebase in a React Native Application

With React Native Firebase, the native Firebase configuration is normally loaded through the platform-specific configuration files and the installed native integration. For a standard setup, you generally do not need to copy the Firebase JavaScript SDK's initializeApp(firebaseConfig) pattern into your React Native Firebase code.

11.1 Basic App Module Import

import React from 'react';
import { View, Text } from 'react-native';
import firebaseApp from '@react-native-firebase/app';

export default function App() {
  const apps = firebaseApp.apps;

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>React Native Firebase Setup</Text>
      <Text>Configured Firebase apps: {apps.length}</Text>
    </View>
  );
}

This example demonstrates inspecting the configured Firebase app instances. It is a basic setup check rather than a complete Firebase integration test. The exact API usage should be verified against the installed React Native Firebase version.

11.2 Firebase JavaScript SDK Initialization Alternative

If you have deliberately chosen the Firebase JavaScript SDK and a Firebase service supported by your React Native environment, the setup uses a JavaScript configuration object and the modular API.

Install the JavaScript SDK:

npm install firebase

Create a configuration module such as src/firebase/firebase.js:

import { initializeApp, getApp, getApps } from 'firebase/app';

const firebaseConfig = {
  apiKey: 'YOUR_FIREBASE_API_KEY',
  authDomain: 'YOUR_PROJECT_ID.firebaseapp.com',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
  appId: 'YOUR_FIREBASE_APP_ID',
};

const app = getApps().length ? getApp() : initializeApp(firebaseConfig);

export default app;

Replace every placeholder with the configuration for your registered application. Include only the fields required for the selected SDK and services. This example illustrates JavaScript SDK initialization; it should not be mixed with the React Native Firebase initialization approach without a specific reason.

11.3 Why a Separate Firebase Module Is Useful

• Keeps configuration in one place.
• Reduces repeated initialization code.
• Makes it easier to import the configured app or service.
• Supports consistent configuration across application modules.
• Helps developers identify which Firebase integration the project uses.

12. Enabling Firebase Authentication

Firebase Authentication helps applications support sign-in and identity management. Once the project is created and the appropriate SDK is configured, Authentication can be enabled from the Firebase Console.

12.1 Enable an Authentication Provider

1. Open the Firebase Console.
2. Select the correct Firebase project.
3. Open the Authentication section.
4. Start the authentication setup if it has not already been completed.
5. Open the sign-in method or provider settings.
6. Enable the provider required by your application, such as email and password, or configure a supported identity provider.
7. Save the configuration.

12.2 Install the React Native Firebase Authentication Module

If your project uses React Native Firebase, install its Authentication module:

npm install @react-native-firebase/auth

For Expo, use the appropriate Expo installation command and configure the required development build. Follow the current React Native Firebase instructions for native setup.

12.3 Example: Create an Account

The following example demonstrates the shape of an email-and-password registration operation using React Native Firebase Authentication.

import auth from '@react-native-firebase/auth';

async function registerUser(email, password) {
  try {
    const result = await auth().createUserWithEmailAndPassword(
      email.trim(),
      password
    );

    return result.user;
  } catch (error) {
    // Map the error to a safe message in your UI.
    throw error;
  }
}

Before using this example, enable the relevant sign-in provider in the Firebase Console and implement appropriate input validation, loading states, and error messages. Do not display raw authentication errors directly to users.

12.4 Example: Sign In

import auth from '@react-native-firebase/auth';

async function signInUser(email, password) {
  try {
    const result = await auth().signInWithEmailAndPassword(
      email.trim(),
      password
    );

    return result.user;
  } catch (error) {
    throw error;
  }
}

The function returns the authenticated user when the operation succeeds. The application should respond to authentication state changes using a suitable state-management approach and should not assume that a successful login request automatically protects every backend resource.

13. Enabling Cloud Firestore

Cloud Firestore is a flexible cloud database that stores information in collections and documents. It can be useful for applications that manage user profiles, tasks, product information, comments, and other structured application data.

13.1 Create the Firestore Database

1. Open the correct Firebase project in the console.
2. Open the Firestore Database section.
3. Choose the database creation option.
4. Select an appropriate database location.
5. Review the available initial security configuration options.
6. Create the database and configure security rules before storing real application data.

The database location should be selected carefully because changing it later may not be straightforward. Consider latency, legal requirements, and the location of your users and services.

13.2 Install the Firestore Module

For React Native Firebase, run:

npm install @react-native-firebase/firestore

13.3 Example: Add a Document

import firestore from '@react-native-firebase/firestore';

async function addTask(title, userId) {
  const task = {
    title,
    ownerId: userId,
    completed: false,
    createdAt: firestore.FieldValue.serverTimestamp(),
  };

  const document = await firestore()
    .collection('tasks')
    .add(task);

  return document.id;
}

This example creates a document in the tasks collection. In a real application, ensure that the current user's identity is derived from a trusted authentication state and that Firestore Security Rules validate ownership and permitted operations.

13.4 Firestore Security Rules

Security Rules determine which authenticated users can read or modify documents. Never assume that hiding a database screen or protecting a navigation route makes its database requests secure.

For example, a simple ownership rule for a collection might look like this:

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /tasks/{taskId} {
      allow read, update, delete:
        if request.auth != null
        && resource.data.ownerId == request.auth.uid;

      allow create:
        if request.auth != null
        && request.resource.data.ownerId == request.auth.uid;
    }
  }
}

This is an illustrative starting point, not a complete production policy. Real rules should validate the allowed fields, data types, ownership changes, and any business-specific constraints. Test rules in the Firebase Emulator Suite before deploying them.

14. Enabling Firebase Realtime Database

Realtime Database stores data in a JSON-like tree and supports realtime synchronization. It may be suitable for applications that require simple, fast updates across connected clients.

14.1 Create the Database

1. Open the Firebase Console.
2. Choose the appropriate project.
3. Open Realtime Database.
4. Create a database instance.
5. Choose the location and setup options offered by the console.
6. Configure and test the database security rules.

14.2 Install the Module

npm install @react-native-firebase/database

14.3 Example: Save Data

import database from '@react-native-firebase/database';

async function saveUserStatus(userId, status) {
  await database()
    .ref(`/userStatus/${userId}`)
    .set({
      status,
      updatedAt: Date.now(),
    });
}

Use appropriate database rules to restrict access. Do not let an unauthenticated client freely write to another user's record by supplying a different user ID.

15. Configuring Firebase Cloud Storage

Cloud Storage for Firebase stores files such as profile images, documents, and attachments. Applications can upload files and retrieve file references or download URLs according to their security and access requirements.

15.1 Set Up Cloud Storage

1. Open the Firebase Console and select the project.
2. Open Cloud Storage.
3. Follow the setup workflow for the project's storage bucket.
4. Review any required billing or plan requirements.
5. Configure access rules before uploading real user data.

15.2 Install the Storage Module

npm install @react-native-firebase/storage

15.3 Example: Upload a File

import storage from '@react-native-firebase/storage';

async function uploadProfileImage(userId, localFilePath) {
  const reference = storage().ref(
    `profileImages/${userId}/avatar.jpg`
  );

  await reference.putFile(localFilePath);

  return reference.getDownloadURL();
}

The local file path must be a valid path accessible to the application. In production, validate file types and sizes, handle upload failures, and enforce authorization in Storage Rules. A download URL should be treated as a potentially shareable access link; do not expose it unnecessarily for private files.

16. Configuring Firebase Cloud Messaging

Firebase Cloud Messaging (FCM) enables supported applications to receive messages and push notifications. React Native projects may need native configuration, platform-specific credentials, and permission handling to support notifications.

16.1 Install the Messaging Module

npm install @react-native-firebase/messaging

16.2 Important Setup Requirements

• Configure the Android app and required notification settings.
• Configure the iOS app and Apple push notification requirements where applicable.
• Request notification permission when required by the operating system.
• Handle notification delivery when the application is foregrounded, backgrounded, or launched from a notification.
• Protect notification tokens and avoid logging them unnecessarily.
• Send sensitive or targeted notifications through an appropriately secured server or trusted environment.

Do not place Firebase Admin SDK credentials or service-account private keys inside the React Native application. Administrative messaging operations belong in a trusted server environment.

17. Understanding Firebase Configuration and Secrets

Firebase client configuration connects an app to its project, but not every value associated with Firebase has the same security characteristics. Developers must distinguish client configuration from privileged server credentials.

17.1 Client Configuration

Client configuration may contain values such as project IDs, app IDs, sender IDs, and API keys. These values are commonly included in mobile or web app configuration. Their presence in a client does not replace the need to secure the Firebase resources.

17.2 Sensitive Server Credentials

Private service-account keys, administrative credentials, server secrets, and privileged backend tokens must never be embedded in a React Native bundle. Mobile application packages can be inspected, so embedded secrets cannot be considered confidential.

17.3 Recommended Security Measures

• Use Firebase Authentication where user identity is required.
• Configure Firestore, Realtime Database, and Storage Security Rules.
• Restrict API keys where supported and appropriate.
• Keep privileged credentials on trusted servers or secure infrastructure.
• Use the principle of least privilege when assigning project access.
• Review the permissions of developers and service accounts.
• Use HTTPS and avoid exposing private user data in logs.
• Test security rules with both permitted and denied requests.

18. Development, Testing, and Production Projects

Using a single Firebase project for every environment can lead to test data mixing with production data. A separate project for each environment helps isolate configuration, users, resources, and access permissions.

18.1 Recommended Environment Structure

18.2 Benefits of Separate Projects

• Reduces the chance of modifying production data during testing.
• Allows different security rules and test accounts.
• Separates analytics and operational monitoring.
• Supports safer release validation.
• Improves control over project permissions and billing.

18.3 Environment Configuration Example

src/
  config/
    firebase.dev.js
    firebase.staging.js
    firebase.prod.js
  services/
    authService.js
    taskService.js
  screens/
    HomeScreen.js

The filenames are illustrative. Use your build system or environment configuration approach to select the appropriate project at build time. Do not switch to production accidentally during local testing.

19. Using the Firebase Console Effectively

The Firebase Console is the primary graphical interface for managing project configuration and Firebase products.

19.1 Project Overview

The overview page shows the selected project and provides shortcuts to register apps and open Firebase services.

19.2 Project Settings

Project settings provide details such as the project ID, project number, registered apps, and platform configuration information. This is also where developers commonly retrieve configuration files for registered apps.

19.3 Authentication Dashboard

The Authentication area allows developers to configure sign-in methods and inspect supported user-management information.

19.4 Database Dashboard

Firestore and Realtime Database interfaces help developers inspect records, manage configuration, and review security rules. Console visibility does not mean an application client should be granted broad database access.

19.5 Usage and Billing

Review product usage, quotas, and billing requirements before releasing an application. Limits and pricing vary by service, project configuration, and plan.

20. Using Firebase CLI

The Firebase Command Line Interface (CLI) is useful for managing Firebase projects, initializing local Firebase configuration, and deploying supported resources such as rules, functions, and hosting configuration.

20.1 Install Firebase CLI

Install the CLI globally using npm:

npm install -g firebase-tools

Check that it is installed:

firebase --version

20.2 Sign In

firebase login

This command authenticates the CLI using your Google account. Follow the browser-based instructions to complete sign-in.

20.3 List Available Projects

firebase projects:list

This command lists Firebase projects accessible to the authenticated account.

20.4 Initialize Firebase Configuration

From the appropriate local project directory, run:

firebase init

Choose the Firebase products you want to configure when prompted. The CLI can create project-level configuration files, such as firebase.json and .firebaserc, depending on the selected workflow.

Note: firebase init initializes local configuration for selected products and associates the directory with a Firebase project. It is not the same as creating a React Native app or automatically configuring every native Firebase SDK.

21. Common Firebase Setup Errors and Solutions

22. Firebase Project Setup Checklist

Use this checklist before beginning feature development.

• Confirm the correct Google account is signed in.
• Create a Firebase project with a clear name and unique project ID.
• Choose the correct project environment.
• Register the Android app using the correct package name.
• Register the iOS app using the correct bundle identifier if needed.
• Download the platform-specific configuration files.
• Choose either the Firebase JavaScript SDK or React Native Firebase based on project requirements.
• Install the required packages.
• Complete platform-specific configuration.
• Rebuild the application after native changes.
• Enable only the Firebase services needed by the project.
• Configure Authentication providers when required.
• Configure and test database and storage security rules.
• Verify that development and production resources are isolated.
• Confirm that no privileged credentials are included in the mobile app.
• Test Firebase connectivity on the intended platforms.

23. Practical Exercise: Create a Firebase Project for a Task App

In this exercise, create and configure a Firebase project for a React Native task-management application.

23.1 Project Requirements

• Create a Firebase project named TaskFlow Development.
• Register the React Native Android app.
• Register the iOS app if the project supports iOS.
• Install the chosen Firebase SDK.
• Enable Firebase Authentication.
• Configure Cloud Firestore for task records.
• Define security rules that restrict users to authorized records.
• Test the connection from the mobile app.
• Document the project ID and the configuration steps without sharing secrets.

23.2 Implementation Steps

1. Create the project through the Firebase Console.
2. Record the project ID and confirm the selected environment.
3. Register each required platform using the exact app identifier.
4. Download the appropriate platform configuration files.
5. Install the SDK selected for the project.
6. Complete native configuration and rebuild the application if required.
7. Enable Authentication and the necessary sign-in provider.
8. Create a Firestore database and define its security rules.
9. Implement a basic test operation using the configured SDK.
10. Test successful and rejected operations to verify the configuration and access rules.

23.3 Expected Result

At the end of the exercise, the React Native application should be connected to the intended Firebase project, and the selected Firebase services should be configured for development. Protected operations should work only when the user and request satisfy the applicable security rules.

24. Interview Questions and Answers

Q1. What is Firebase?

Firebase is Google's application development platform that offers services such as Authentication, databases, Storage, Cloud Messaging, Analytics, and monitoring tools.

Q2. What is a Firebase project?

A Firebase project is a container that organizes registered apps, Firebase services, and related project resources.

Q3. What is the difference between a project name and a project ID?

The project name is a readable display name, while the project ID is a unique identifier used by Firebase and Google Cloud resources.

Q4. Can one Firebase project support both Android and iOS?

Yes. A Firebase project can contain multiple registered apps, including Android and Apple apps. Separate projects may be preferable for development and production environments.

Q5. What is google-services.json?

It is the Firebase configuration file for a registered Android app. It connects the Android build to the correct Firebase project and app registration.

Q6. What is GoogleService-Info.plist?

It is the configuration file used for a registered Apple app. It must be included in the appropriate iOS project and application target.

Q7. What is React Native Firebase?

React Native Firebase is a collection of React Native integrations for Firebase services, using native integrations on Android and iOS.

Q8. What is the difference between Firebase JavaScript SDK and React Native Firebase?

The Firebase JavaScript SDK provides modular JavaScript APIs for supported environments, while React Native Firebase provides React Native-oriented integrations with native modules. Choose based on the required services and platform compatibility.

Q9. Why must the Android package name match Firebase registration?

Firebase uses the registered package name to identify the Android app. A mismatch can cause setup or integration problems.

Q10. What is Cloud Firestore?

Cloud Firestore is a cloud-hosted document database that organizes data into collections and documents and supports queries and realtime listeners.

Q11. Why are Firebase Security Rules important?

Security Rules define which clients can read or write database records and stored files. They help enforce authorization independently of the mobile interface.

Q12. Should Firebase Admin credentials be included in a React Native app?

No. Privileged service-account credentials must remain in a trusted server environment because mobile app packages can be inspected.

Q13. Why rebuild after installing React Native Firebase native modules?

Native modules must be compiled and linked into the application binary. A JavaScript reload does not add missing native code to an existing build.

Q14. Why use separate Firebase projects for development and production?

Separate projects isolate test data, production data, settings, access permissions, and other resources, reducing the risk of accidental changes to live systems.

Q15. What is Firebase CLI?

The Firebase CLI is a command-line tool used to manage Firebase projects and configure or deploy supported Firebase resources.

25. Quick Revision Notes

• Firebase is a platform for building mobile and web application features.
• A Firebase project contains registered apps and Firebase resources.
• The project ID is unique and should be selected carefully.
• Android apps use google-services.json.
• iOS apps use GoogleService-Info.plist.
• The app identifier must match the identifier registered with Firebase.
• React Native Firebase requires platform-specific configuration for native integration.
• The Firebase JavaScript SDK is a separate integration option for supported services and environments.
• Authentication manages supported sign-in methods.
• Firestore stores data in collections and documents.
• Storage Rules and database Security Rules control access to protected resources.
• Privileged server credentials must never be embedded in a mobile app.
• Separate Firebase projects can isolate development, staging, and production.
• Firebase CLI helps initialize and manage supported Firebase resources.
• Test configuration and security rules before releasing the application.

26. Best Practices

• Use descriptive project names and carefully chosen project IDs.
• Keep separate Firebase projects for development, staging, and production when appropriate.
• Register the correct Android and iOS app identifiers.
• Follow the current setup guide for the selected SDK and React Native version.
• Install only the Firebase service modules the application needs.
• Rebuild native applications after relevant native dependency changes.
• Apply restrictive security rules before adding real data.
• Test access as both authorized and unauthorized users.
• Use least-privilege access for team members and service accounts.
• Monitor usage and review billing requirements.
• Never embed service-account private keys or administrator credentials in client code.
• Keep configuration and environment selection consistent across build variants.
• Consult official documentation when package versions or native setup requirements change.

27. Official Learning Resources

• Firebase Console — create and manage Firebase projects.
• Understand Firebase Projects — learn about projects, app registrations, and project identifiers.
• Add Firebase to an Android Project — review Android registration and configuration.
• Add Firebase to a JavaScript Project — learn about JavaScript SDK initialization.
• React Native Firebase Documentation — follow React Native-specific installation and service guides.
• Firebase Project Workflow Best Practices — review environment separation and project setup guidance.
• Firebase CLI Documentation — learn CLI installation and project initialization.
• Get Started with Firestore Security Rules — learn how to secure database access.
• React Native Environment Setup — prepare the React Native development environment.

28. Conclusion

Creating and configuring a Firebase project is an important first step when integrating Firebase services into a React Native application. The process includes creating the project, registering the correct platform apps, downloading their configuration files, choosing a compatible SDK, completing the native setup where required, and enabling the services needed by the application.

A successful setup is more than connecting an SDK. Developers must also configure authentication, protect database and file access with Security Rules, separate development and production resources, and keep privileged credentials out of the mobile application.

By following these steps and consulting the official documentation for the selected SDK, developers can build a reliable foundation for React Native applications that use Firebase Authentication, Cloud Firestore, Storage, and other Firebase services.

Explore the course: React Native Training at JustAcademy

Register for a demo: JustAcademy Course Demo Registration

Visit the website: JustAcademy Official Website